<template>
     <div class="contianer-q">
      <div class="items-q"
      v-for="m in list"
      >
        <div class="img-q"
         @click="handleClick(m)">
          <img :src="m.image_url"></img>
        </div>
        <div class="item-q">
          <h1>{{m.product_name}}</h1>
          <h2>
            {{m.product_description}}
          </h2>
          <span class="first">￥{{m.selling_price}}</span>
          <span class="second">已售出{{m.sales}} 件</span>
          <span class="third">
            <span><svg t="1623053475778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="13" height="19"><path d="M428.6 924.2L96 619.5l67.8-74L328.2 696V110.3h100.4zM695.8 913.7H595.4V99.8L928 404.5l-67.8 74L695.8 328z" fill="#333333" p-id="3427"></path></svg></span>
            对比
          </span>
        </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios'
export default{
    data(){
        return{
            list:[]  
        }
    },

async mounted(){ 

    let { limit, offset, ct } = this
      let result = await axios.get(`/jiyin.json`)
    this.list = result.data
      },
  methods: {
    handleClick(m) {
      
      this.$router.push({
     
        path: '/details',
        query: {
          nm: m.product_name,
          img:m.image_url,
          des:m.product_description,
          pri:m.selling_price,
          sal:m.sales,
          mar:m.market_price
        }
      })
    }
  }
}
 
</script>

<style lang='stylus' scoped>
.contianer-q {
  margin: 0 0.15rem 0 0.15rem;
  height 100%

  .items-q {
    display: flex;
  }

  .img-q {
    margin-top :0.1212rem;
    width: 1.0875rem;
    height: 1.0875rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.item-q {
    margin-left  :0.1212rem;
    margin-top :0.1212rem;
  flex: 1;
  width: 2.175rem;
  height: 1.2078rem;
  position: relative;

  .first {
    color: #ff6732;
    font-size: 0.15rem;
    font-weight: bold;
    margin-right: 0.02rem;
  }

  .second {
    color: #999;
  }

  .third {
    color: #333333;
    position: absolute;
    right: 0;
  }

  h1 {
    color: #2d2c2c;
    font-size: 0.1575rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  h2 {
      margin-bottom : 0.04rem;
    margin-top: 0.03rem;
    color: #999;
    font-size: 0.12rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
</style>